<template>
  <div>
    <HolesColors
      :fillInHole="fillInHole"
      @handleEnd="handleEnd"
      @handleSetVal="handleSetVal"
    ></HolesColors>
    <div class="table_list">
      <el-form>
        <el-form-item class="form_item" v-for="item, index in formList" :key="index">
          <div class="item_piece">
            <span class="item_title">颜色:</span>
            <span class="color_piece" :style="{'background-color': item.color}"></span>
          </div>
          <div class="item_piece">
            <span class="item_title">标签名:</span>
            <el-input class="label_inpput" disabled v-model="item.label"></el-input>
          </div>
          <div class="item_piece">
            <span class="item_title">分子量:</span>
            <el-input class="mole_input" v-model="item.mole"></el-input>
          </div>
          <div class="item_piece">
            <span class="item_title">归零:</span>
            <el-switch
              v-model="item.isZero"
              active-text="是"
              inactive-text="否">
            </el-switch>
          </div>
          <div class="item_piece">
            <span class="item_title">拟合优化:</span>
            <el-switch
              v-model="item.isFitting"
              active-text="是"
              inactive-text="否">
            </el-switch>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import HolesColors from '@/components/96HolesColor'
export default {
  props: {
    // 需要禁用的孔号
    fillInHole: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // {
      //   color: 'red',
      //   label: 'A2',
      //   mole: '1091201212',
      //   isZero: true,
      //   isFitting: true
      // },
      formList: [],
      valueList: []
    }
  },
  components: {
    HolesColors
  },
  watch: {
    formList: {
      handler(value) {
        this.$emit('hanldeConcent', value)
      },
      deep: true
    }
  },
  methods: {
    handleSetVal(list) {
      this.valueList = list.map(item => {
        let str = []
        for (const k in item.value) {
          if(!item.value[k] && item.value[k] !== 0) return
          str.push(`${k}:${item.value[k]}`)
        }
        return str
      }).flat().filter(Boolean)

    },
    handleEnd(table) {
      // 获取去重的颜色组
      let allColor = []
      const selectedColor = table.map(item => Object.values(item.content))
      selectedColor.forEach(item => allColor.push(...item))
      allColor =  Array.from(new Set(allColor))

      // 获取没有去重过的label
      let result = []
      // 索引区分
      let i = 0
      allColor.forEach((color, index) => {
        table.forEach((item, inde) => {
          for (const k in item.content) {
            i++
            if(item.content[k] === color) {
              result.push({
                id: i,
                color,
                label: item.row + k
              })
            }
          }
        })        
      })

      // 将label去重整合到一起
      let map = {},
			dest = [];
      for (let i = 0; i < result.length; i++) {
        let ai = result[i];
        if (!map[ai.color]) {
          dest.push({
            id: ai.id,
            color: ai.color,
            label: ai.label
          });
          map[ai.color] = ai;
        } else {
          for (let j = 0; j < dest.length; j++) {
            let dj = dest[j];
            if (dj.color === ai.color) {
              dj.label += ('&' + ai.label)
              break;
            }
          }
        }
      };
      this.formList = dest.map(item => {
        return {
          ...item,
          mole: '',
          isZero: true,
          isFitting: false,
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-form-item {
  margin: 0;
}
.el-form {
  min-width: 800px;
}
.table_list {
  max-height: 300px;
  height: 100%;
  width: 100%;
  transition: all 1s;
  overflow-y: auto;
  padding-right: 10px;
  box-shadow: 0 0 20px -6px rgba(0, 0, 0, 0.6) inset;
  .form_item /deep/ .el-form-item__content {
    display: flex;
    align-items: center;
    border-top: 1px solid #999;
    padding: 6px 20px 6px 10px;
    width: 100%;
    .item_piece {
      display: flex;
      align-items: center;
      white-space: nowrap;
      margin-right: 26px;
      .item_title {
        font-weight: 700;
        color: #615f5f;
        margin-right: 6px;
      }
      .color_piece {
        display: inline-block;
        width: 24px;
        height: 24px;
        background-color: pink;
      }
      .label_inpput {
        width: 100px;
      }
      .mole_input {
        width: 140px;
      }
    }
  }
}
</style>